<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1">
		<title>New Tab</title>
		<link rel="stylesheet" href="style.css">
	</head>
	<body>
		<div id="background"></div>
		<canvas id="snow"></canvas> 
		<div class="centerWrapper">
			<div class="large no-transform">
				<div id="time" class="left"></div>
				<div id="weather" class="right text-right">Loading&hellip;</div>
			</div>
			<div class="small no-transform">
				<div id="date" class="left"></div>
				<div id="details" class="right text-right">Waiting for Dark Sky&hellip;</div>
			</div>
			<ul class="box" id="box">
				<div class="left">
					<li>
						<a id="parent1" class="parent" data-key="s" href="javascript:void(0)"><span>S</span>ocial Media</a>
						<ul class="subMenu">
							<li><a class="tab tab1" data-key="f" href="https://facebook.com/"><span>F</span>acebook</a></li>
							<li><a class="tab tab1" data-key="m" href="https://messenger.com/"><span>M</span>essenger</a></li>
							<li><a class="tab tab1" data-key="x" href="https://messages.android.com/">Te<span>x</span>t Messages</a></li>
							<li><a class="tab tab1" data-key="i" href="https://instagram.com/"><span>I</span>nstagram</a></li>
							<li><a class="tab tab1" data-key="t" href="https://tumblr.com/"><span>T</span>umblr</a></li>
							<li><a class="tab tab1" data-key="w" href="https://twitter.com/">T<span>w</span>itter</a></li>
							<li><a class="tab tab1" data-key="g" href="https://mail.google.com/mail/u/0/"><span>G</span>mail</a></li>
						</ul>
					</li>
					<li>
						<a id="parent2" class="parent" data-key="m" href="javascript:void(0)"><span>M</span>usic &amp; Videos</a>
						<ul class="subMenu">
							<li><a class="tab tab2" data-key="n" href="https://netflix.com/"><span>N</span>etflix</a></li>
							<li><a class="tab tab2" data-key="h" href="https://hulu.com/"><span>H</span>ulu</a></li>
							<li><a class="tab tab2" data-key="y" href="https://youtube.com/"><span>Y</span>ouTube</a></li>
							<li><a class="tab tab2" data-key="c" href="https://soundcloud.com/">Sound<span>C</span>loud</a></li>
							<li><a class="tab tab2" data-key="s" href="https://open.spotify.com/"><span>S</span>potify Web Client</a></li>
							<li><a class="tab tab2" data-key="g" href="https://play.google.com/music/listen"><span>G</span>oogle Play Music</a></li>
						</ul>
					</li>
					<li>
						<a id="parent3" class="parent" data-key="r" href="javascript:void(0)"><span>R</span>eddit</a>
						<ul class="subMenu">
							<li><a class="tab tab3" data-key="f" href="https://reddit.com/"><span>F</span>ront Page</a></li>
							<li><a class="tab tab3" data-key="t" href="https://reddit.com/r/trees/">/r/<span>t</span>rees</a></li>
							<li><a class="tab tab3" data-key="s" href="https://reddit.com/r/see/">/r/<span>s</span>ee</a></li>
							<li><a class="tab tab3" data-key="u" href="https://reddit.com/r/unixporn/">/r/<span>u</span>nixporn</a></li>
							<li><a class="tab tab3" data-key="p" href="https://reddit.com/r/startpages/">/r/start<span>p</span>ages</a></li>
							<li><a class="tab tab3" data-key="d" href="https://reddit.com/r/webdev/">/r/web<span>d</span>ev</a></li>
							<li><a class="tab tab3" data-key="w" href="https://reddit.com/r/web_design/">/r/<span>w</span>eb_design</a></li>
						</ul>
					</li>
				</div>
				<div class="right">
					<li>
						<a id="parent4" class="parent" data-key="d" href="javascript:void(0)"><span>D</span>esign</a>
						<ul class="subMenu">
							<li><a class="tab tab4" data-key="k" href="https://keep.google.com/">Google <span>K</span>eep</a></li>
							<li><a class="tab tab4" data-key="b" href="https://dribbble.com/">Dri<span>b</span>bble</a></li>
							<li><a class="tab tab4" data-key="p" href="https://unsplash.com/">Uns<span>p</span>lash</a></li>
							<li><a class="tab tab4" data-key="f" href="https://fonts.google.com/">Google Web <span>F</span>onts</a></li>
							<li><a class="tab tab4" data-key="y" href="https://keyframes.net/">Ke<span>y</span>frames</a></li>
						</ul>
					</li>
					<li>
						<a id="parent5" class="parent" data-key="v" href="javascript:void(0)">De<span>v</span></a>
						<ul class="subMenu">
							<li><a class="tab tab4" data-key="g" href="https://github.com/"><span>G</span>ithub</a></li>
							<li><a class="tab tab4" data-key="m" href="https://developer.mozilla.org/en-US/"><span>M</span>ozilla Development Network</a></li>
							<li><a class="tab tab4" data-key="s" href="https://stackoverflow.com/"><span>S</span>tack Overflow</a></li>
							<li><a class="tab tab4" data-key="b" href="https://getbootstrap.com/"><span>B</span>ootstrap</a></li>
							<li><a class="tab tab4" data-key="t" href="http://tachyons.io/"><span>T</span>achyons</a></li>
							<li><a class="tab tab4" data-key="c" href="http://caniuse.com/"><span>C</span>an I Use?</a></li>
						</ul>
					</li>
					<li>
						<a id="parent6" class="parent" data-key="c" href="javascript:void(0)"><span>C</span>omics</a>
						<ul class="subMenu">
							<li><a class="tab tab6" data-key="x" href="http://xkcd.com/"><span>X</span>KCD</a></li>
							<li><a class="tab tab6" data-key="p" href="http://potshotcomic.com/"><span>P</span>ot Shot Comic</a></li>
							<li><a class="tab tab6" data-key="&amp;" href="http://explosm.net/">Cyanide <span>&amp;</span> Happiness</a></li>
							<li><a class="tab tab6" data-key="n" href="http://powernapcomic.com/">Power<span>n</span>ap Comic</a></li>
							<li><a class="tab tab6" data-key="e" href="http://extrafabulouscomics.com/"><span>E</span>xtra Fabulous Comics</a></li>
							<li><a class="tab tab6" data-key="d" href="http://thedoghousediaries.com/"><span>D</span>oghouse Diaries</a></li>
							<li><a class="tab tab6" data-key="q" href="http://questionablecontent.net/"><span>Q</span>uestionable Content</a></li>
							<li><a class="tab tab6" data-key="s" href="http://smbc-comics.com/"><span>S</span>aturday Morning Breakfast Cereal</a></li>
							<li><a class="tab tab6" data-key="o" href="http://theoatmeal.com/comics/">The <span>O</span>atmeal</a></li>
						</ul>
					</li>
				</div>
			</ul>
			<div class="clear"></div>
			<div id="lastFM" class="text-center"><p>Loading song from Last.FM&hellip;</p></div>
			<div id="gmail" class="text-center"><p>Fetching unread emails&hellip;</p></div>
		</div>
		<p id="quote" class="bottom text-center"></p>
		<div id="modal">
			<div class="inner text-center">
				<h1>Keyboard Shortcuts</h1>
				<p>Hover over the cells to see the keys to open them.</p>
				<table class="centered">
					<tbody>
						<tr>
							<td><code>W</code></td>
							<td>Weather details</td>
						</tr>
						<tr>
							<td><code>G</code></td>
							<td>GitHub repo</td>
						</tr>
						<tr>
							<td><code>Alt+G</code></td>
							<td>Github repo ideas project</td>
						</tr>
						<tr>
							<td><code>Esc</code></td>
							<td>Close all cells</td>
						</tr>
						<tr>
							<td><code>?</code></td>
							<td>Opens this modal</td>
						</tr>
					</tbody>
				</table>
			</div>
		</div>
		<script src="scripts.js"></script>
	</body>
</html>
